<template>
  <div>
    <!-- 背景图片 -->
    <div style="animation: header-effect 2s" class="background-image">
      <video class="index-video" autoplay="autoplay" muted="muted" loop="loop" :src="randomCover" />
    </div>
    <div class="favorite-container">
      <!-- 内容 -->
      <div class="favorite-content my-animation-slide-bottom">
        <!-- 收藏夹 -->
        <div v-show="!$common.isEmpty(collects)">
          <div v-for="(value, key) in collects" :key="key" style="margin-top: 20px">
            <div class="collect-classify">
              {{ key }}
            </div>
            <div class="favorite-item-wrap">
              <div v-for="(item, index) in value" :key="index" @click="toUrl(item)" class="favorite-item">
                <div>
                  <el-avatar class="favorite-item-image" :size="55" :src="item.cover" shape="square">
                  </el-avatar>
                </div>
                <div style="width: calc(100% - 80px)">
                  <div class="favorite-item-title">
                    {{ item.title }}
                  </div>
                  <div class="favorite-item-introduction">
                    {{ item.introduction }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  components: {
  },

  data() {
    return {
      card: null,
      collects: {},
      randomCover: 'https://prod-streaming-video-msn-com.akamaized.net/f9e318a4-7575-4809-b371-7b34a5807857/1f80c234-46af-41a5-8f50-8f0926e29a2c.mp4'
    }
  },

  computed: {},

  watch: {
  },

  created() {
    this.card = this.$route.query.card || 1;
    this.getCollect();
    this.getRandomCover('favoritesCover');
  },

  mounted() {
  },

  methods: {
    toUrl(item) {
      var url = item.url;
      if (url.includes("http")) {
        window.open(url);
      } else {
        this.$router.push({ path: url, query: { type: item.title } })
      }
    },
    getCollect() {
      this.$http.get(this.$constant.baseURL + "/webInfo/listCollect/" + this.card)
        .then((res) => {
          if (!this.$common.isEmpty(res.data)) {
            this.collects = res.data;
          }
        })
        .catch((error) => {
          this.$message({
            message: error.message,
            type: "error"
          });
        });
    },
    getRandomCover(type) {
      this.$http.get(this.$constant.baseURL + "/webInfo/listResourceByType/" + type)
        .then((res) => {
          if (!this.$common.isEmpty(res.data)) {
            var len = res.data.length;
            var index = Math.floor(Math.random() * len);
            this.randomCover = this.$constant.resBaseURL + res.data[index].pathSub;
          }
        })
        .catch((error) => {
          this.$message({
            message: error.message,
            type: "error"
          });
        });
    }
  }
}
</script>

<style scoped>
.favorite-container {
  padding: 25px;
  padding-top: 100px;
}

.video-background {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  z-index: -100;
}

.favorite-header {
  margin: 35px auto 30px;
  height: 120px;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  max-width: 1200px;
}

.favorite-search-item {
  border: 1px solid var(--lightGray);
  width: 100%;
  font-size: 14px;
  min-height: 100%;
  padding: 20px;
  /* 不改变大小 */
  resize: none;
  /* 不改变边框 */
  outline: none;
  border-radius: 4px;
  background-image: var(--commentURL);
  background-size: 15%;
  background-repeat: no-repeat;
  background-position: right 50%;
  margin-bottom: 10px;
}

.index-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.favorite-image::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--translucent);
}

.card-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: wrap;
}

.card-item {
  transition: all 0.3s;
  position: relative;
  width: 95px;
  height: 60px;
  border-radius: 20px;
  animation: hideToShow 1s ease-in-out;
  cursor: pointer;
  overflow: hidden;
  margin: 10px;
  color: var(--white);
}

.card-item:hover {
  transform: translateY(-6px);
}

.card-name {
  font-weight: bold;
  font-size: 16px;
}

.card-name:after {
  top: 50px;
  width: 22px;
  left: 26px;
  height: 2px;
  background: var(--white);
  content: "";
  border-radius: 1px;
  position: absolute;
}

.card-desc {
  font-weight: bold;
  margin-top: 15px;
}

.favorite-content {
  margin: 0 auto;
  max-width: 1200px;
}

.collect-classify {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 10px;
}

.favorite-item-wrap {
  display: flex;
  flex-wrap: wrap;
  margin-left: -10px;
}

.favorite-item {
  transition: all 0.3s;
  border-radius: 12px;
  box-shadow: 0 8px 16px -4px #2c2d300c;
  background: linear-gradient(-45deg, var(--favoriteBg1), var(--favoriteBg3), var(--favoriteBg4), var(--favoriteBg1));
  background-size: 400% 400%;
  animation: gradientBG 10s ease infinite;
  display: flex;
  width: calc(100% / 4 - 20px);
  max-width: 320px;
  height: 90px;
  overflow: hidden;
  padding: 15px;
  cursor: pointer;
  margin: 10px;
}

.favorite-item:hover {
  background: var(--translucent);
  color: var(--white);
}

.favorite-item:hover .favorite-item-image {
  transition: all 0.6s;
  width: 0 !important;
  height: 0 !important;
  opacity: 0;
  margin-right: 0;
}

.favorite-item:hover div:nth-child(2) {
  width: 100% !important;
}

.favorite-item-image {
  margin-right: 20px;
  transition: all 0.3s;
}

.favorite-item-title {
  font-size: 19px;
  font-weight: bold;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-bottom: 5px;
}

.favorite-item-introduction {
  opacity: 0.7;
  font-weight: bold;
  letter-spacing: 1px;
  font-size: 14px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

@media screen and (max-width: 150px) {
  .card-container {
    margin-top: 0;
  }
}

@media screen and (max-width: 900px) {
  .favorite-item {
    width: calc(100% / 3 - 20px);
  }
}

@media screen and (max-width: 700px) {
  .favorite-item {
    width: calc(100% / 2 - 20px);
  }
}

@media screen and (max-width: 400px) {
  .favorite-item {
    width: calc(100% - 20px);
  }
}
</style>
